<script type="text/javascript" charset="UTF-8">
	$(document).ready( function() {

		$("#listAppointments").dataTable({
			"bDestroy": true,
			"bProcessing": true,
			"bSort": false,
			"sAjaxSource": '/turnos/rest/retrieve/appointments',
			"sAjaxDataProp": "data",
			"aoColumns": [
				{
					"mDataProp": "name"
				}, {
					"mDataProp": "fromHour"
				}, {
					"mDataProp": "toHour"
				}, {
					"mDataProp": function ( source, type, val ) {
						return "<a href='#' page='addEditAppointment.do?id=" + source.id + "'>Edit</a> | <a href='#' page='" + source.id + "'>Delete</a>";
					}
				}
			]
		});
	});
</script>

<table id="listAppointments" class="dataList">
	<thead>
		<tr>
			<th>Name</th>
			<th>From hour</th>
			<th>To hour</th>
			<th><a href="#" page="addEditAppointment.do">Add</a></th>
		</tr>
	</thead>
	<tbody>

	</tbody>
	<tfoot>
		<tr>
			<th>Name</th>
			<th>From hour</th>
			<th>To hour</th>
			<th><a href="#" page="addEditAppointment.do">Add</a></th>
		</tr>
	</tfoot>
</table>
<br>
<div id="addEdit"></div>
